<template>
    <div>
        <!-- 进场 火车 -->
        <base-list ref="enterCR" :condition="condition" :datas.sync="enterCR" :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="110px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="计划编号">
                            <el-input type="text" v-model.trim="condition.search_LIKE_planNo"></el-input>
                            <!-- <el-select v-model="condition['search_LIKE_planNo']" placeholder="请选择" clearable>
                              <el-option v-for="[key, val] in _dictBusinessModel" :key="key" :label="val"
                                         :value="key"></el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="箱号">
                            <el-input type="text" v-model.trim="condition.search_LIKE_containerNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="作业状态">
                            <el-select v-model="condition['search_EQ_jobStatus']" placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictJobStatus" :key="key" :label="val" :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="货名">
                            <el-input type="text" v-model.trim="condition.search_LIKE_cargoName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="预计作业时间">
                            <date-slot :startDate.sync="condition.search_GTE_planJobDate" dateType="yyyy-MM-dd" :endDate.sync="condition.search_LTE_planJobDate"></date-slot>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="ml-110">
                            <el-button type="primary" @click="openPLJX" v-if="power('WJOB_CONTAINERPLANJOB_TRAINJC:BACTH')">
                                批量进场
                            </el-button>
                            <el-button type="primary" @click="trEnter" v-if="power('WJOB_CONTAINERPLANJOB_TRAINJC:JC')">
                                进场
                            </el-button>
                            <el-button type="primary" @click="calEnter" v-if="power('WJOB_CONTAINERPLANJOB_TRAINJC:CANCEL')">
                                取消作业
                            </el-button>
                            <el-button icon="el-icon-search" type="primary" @click="loadData">
                                查 询
                            </el-button>
                            <el-button @click="handleExport">导出Excel</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-alert v-if="multipleSelection.length>0" :title="'已选择'+multipleSelection.length+'条'" class="mt-20" type="success">
                    </el-alert>
                </el-row>
            </el-form>
            <el-table slot="list" :data="enterCR" border stripe max-height="500" @selection-change="handleSelectionChange">
                <el-table-column type="selection" prop="id" width="55"></el-table-column>
                <el-table-column fixed="left" prop="id" label="序号" min-width="50">
                    <template slot-scope="scope">
                        {{ scope.$index+1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="planJobDate" label="预计作业日期"  min-width="140"></el-table-column>
                <el-table-column prop="containerNo" label="箱号"  min-width="150"></el-table-column>
                <el-table-column prop="plateNumber" label="车牌号"  min-width="90"></el-table-column>
                <el-table-column prop="containerType" label="箱型"  min-width="75"></el-table-column>
                <el-table-column prop="containerSize" label="尺寸"  min-width="75"></el-table-column>
                <el-table-column prop="ifHeavy" label="空重"  min-width="75">
                    <template slot-scope="scope">
                        {{ scope.row.ifHeavy | _filterIfHeavyType }}
                    </template>
                </el-table-column>
                <el-table-column prop="tradeType" label="内外贸"  min-width="90">
                    <template slot-scope="scope">
                        {{ scope.row.tradeType | _filterTradeType }}
                    </template>
                </el-table-column>
                <el-table-column prop="ownerName" label="箱主"  min-width="160"></el-table-column>
                <el-table-column prop="cargoName" label="货名"  min-width="90"></el-table-column>
                <el-table-column prop="cargoWeight" label="货重"  min-width="75"></el-table-column>
                <el-table-column prop="jobStatus" label="作业状态"  min-width="110">
                    <template slot-scope="scope">
                        <span v-if="scope.row.fall">已落空</span>
                        <span v-else>{{ scope.row.jobStatus | _filterJobStatus }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="planNo" label="计划编号"  min-width="140"></el-table-column>
                <el-table-column prop="entrustNo" label="委托编号"  min-width="140"></el-table-column>
            </el-table>
        </base-list>
        <el-dialog title="确认弹窗" :visible.sync="pickUpDialog" :modal="false" :modal-append-to-body="false" width="400px" style="margin-top: 8vh;">
            <el-form :rules="rules" ref="form" :model="form" label-width="100px">
                <el-row>
                    <el-col :span="19">
                        <el-form-item label="车牌号：" prop="plateNumber">
                            <el-input v-model="form.plateNumber"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="进场时间：" prop="startRecord">
                            <el-date-picker v-model="form.startRecord" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handlePickCancel">取 消</el-button>
                <el-button type="primary" @click="pickUp" :loading="$store.getters.loadingBtn">确 定</el-button>
            </div>
        </el-dialog>
        <PLJC ref="pljc" code="QCPLJC" @loadData="loadData"></PLJC>
    </div>
</template>

<script>
import dateSlot from "@/components/date/dateSlot";
import {
    containerEnter,
    enterCancel,
    enterChoice
} from "@/api/containerJob/containerJob";
import PLJC from "./dialogs/PLJC";
import { getLocalTime } from "@/utils/dateFormat";
import { newExportExcel } from "@/utils/newExport";
import {ifHeavyType,tradeType,jobStatus} from "../../../assets/dict";

export default {
    name: "enterCR",
    components: {
        dateSlot,
        PLJC
    },
    data() {
        return {
            pageSearch: containerEnter, //查询接口名
            condition: {
                search_EQ_transportMode: "CR",
                search_EQ_jobStatus: "NOOPERATE"
            }, // 查询条件
            enterCR: [], // table数组
            multipleSelection: [],
            startRecord: "",
            pickUpDialog: false,
            rules: {
                startRecord: [
                    {
                        required: true,
                        message: "请选择进场时间!",
                        trigger: "change"
                    }
                ],
                plateNumber: [
                    {
                        required: true,
                        message: "请输入车牌号!",
                        trigger: "change"
                    }
                ]
            },
            form: {
                startRecord: getLocalTime(+new Date(), "YYYY-MM-DD"),
                plateNumber: ""
            }
        };
    },
    mounted() {
        this.loadData("first");
    },
    methods: {
        loadData(val) {
            if (val === undefined) {
                this.$emit("changeInfo");
            }
            this.$refs.enterCR.loadData();
        },
        trEnter() {
            let _arr = this.multipleSelection;
            if (!_arr.length) {
                this.$message({
                    message: "至少选择一条数据!",
                    type: "error"
                });
                return;
            }
            let isOne = true;
            if (_arr.length > 1) {
                for (let i = 0; i < _arr.length; i++) {
                    if (_arr[0].plateNumber != _arr[i].plateNumber) {
                        isOne = false;
                    }
                }
            }
            if (isOne) {
                this.form.plateNumber = _arr[0].plateNumber;
            }
            this.pickUpDialog = true;
        },
        // get selections
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        pickUp() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    let __arr = this.multipleSelection;
                    let _data = {};
                    _data.enterDate = this.form.startRecord;
                    _data.container = [];
                    _data.transportMode = "CR";
                    for (let i = 0; i < __arr.length; i++) {
                        _data.container.push({
                            containerNo: __arr[i].containerNo,
                            id: __arr[i].id,
                            planNo: __arr[i].planNo,
                            plateNumber: this.form.plateNumber
                        });
                    }

                    enterChoice(_data).then(res => {
                        this.$message({
                            message: "进场成功!",
                            type: "success"
                        });
                        this.loadData();
                        this.handlePickCancel();
                    });
                } else {
                    this.$message({
                        message: "请检查表单!",
                        type: "error"
                    });
                }
            });
        },
        handlePickCancel() {
            this.pickUpDialog = false;
        },
        //取消作业
        calEnter() {
            let _arr = this.multipleSelection;
            if (!_arr.length) {
                this.$message({
                    message: "至少选择一条数据!",
                    type: "error"
                });
                return;
            }
            this.$confirm(`确定取消作业?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let container = [];
                    for (let i = 0; i < _arr.length; i++) {
                        container.push({
                            containerNo: _arr[i].containerNo,
                            id: _arr[i].id,
                            planNo: _arr[i].planNo
                        });
                    }
                    enterCancel({ container }).then(res => {
                        this.$message({
                            message: "取消进场成功!",
                            type: "success"
                        });
                        this.loadData();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        },
        openPLJX() {
            this.$refs.pljc.dialogForm = true;
            // this.$refs.pljc.data = this.multipleSelection
        },
        handleExport(){
            let map = new Map();
            map.set('planJobDate','预计作业日期')
            map.set('containerNo','箱号')
            map.set('plateNumber','车牌号')
            map.set('containerType','箱型')
            map.set('containerSize','尺寸')
            map.set('ifHeavy','空重')
            map.set('tradeType','内外贸')
            map.set('ownerName','箱主')
            map.set('cargoName','货名')
            map.set('cargoWeight','货重')
            map.set('jobStatus','作业状态')
            map.set('planNo','计划编号')
            map.set('entrustNo','委托编号')
            let params = this.$assist.copySearchConditions(this.condition)
            params.iDisplayLength=99999
            containerEnter(params).then(res => {
                let exportRecords = [];
                let exportArr = res.data.aaData;
                exportArr.forEach(record => {
                    let exportRecord = {};
                    for (let [key, value] of map.entries()) {
                        if (key === "ifHeavy") {
                            record[key] = ifHeavyType.get(record[key]);
                        }
                        if (key === "tradeType") {
                            record[key] = tradeType.get(record[key]);
                        }
                        if (key === "jobStatus") {
                            record[key] = jobStatus.get(record[key]);
                        }
                        exportRecord[value] = record[key];
                    }
                    exportRecords.push(exportRecord);
                });
                newExportExcel("汽车进场", exportRecords);
            })
        }
    },
    watch: {
        pickUpDialog(bool) {
            if (!bool) {
                this.form.startRecord = getLocalTime(+new Date(), "YYYY-MM-DD");
                this.form.plateNumber = "";
                this.$refs.form.resetFields();
            }
        }
    }
};
</script>

<style>
</style>
